<template>
	<gracePage :customHeader="false">
		<view slot="gBody" class="grace-flex-v1 king-border-top" id="gBody">
			<view class="king-seg grace-flex">
				<view class="grace-black king-tab " :class="{ 'king-tab-border': current == 0 }" @tap="switchTab(0)">门店</view>
				<view class="grace-black king-tab" :class="{ 'king-tab-border': current == 1 }" @tap="switchTab(1)">家政员</view>
			</view>
			<scroll-view scroll-y class="grace-list" :style="{ height: scrollHeight + 'px' }">
				<view v-show="current == 0">
					<swipeList :btns="btns" @btnTap="btnTap" :btnWidth="110" v-for="i in 5" :key="i" @thStart="swipeListTouchStart" :imgSize="['160rpx', '160rpx']" ref="swiperList">
						<view class="grace-space-between grace-flex-vcenter grace-animate fadeIn" slot="body">
							<view class="">
								<view class="grace-list-title grace-h4" style="font-weight: bold;"><text>新多多家政</text></view>
								<view class="king" style="margin:10rpx 0rpx">
									<text class="fa-icon fa-diamond" style="color:#00BFFF"></text>
									<text class="fa-icon fa-diamond" style="color:#00BFFF"></text>
									<text class="fa-icon fa-diamond" style="color:#00BFFF"></text>
									<text class="grace-icons icon-radio-ckd" style="color:#7CCD7C;margin-left: 50rpx;"></text>
									<text style="margin-left: 10rpx;">108单</text>
								</view>
								<view>
									<text class="fa-icon fa-location-arrow" style="font-size: 36rpx;color:#FF4500"></text>
									<text style="margin-left: 10rpx;" @tap="btnTap">广东省天河市天河区XXX</text>
								</view>
							</view>
							<text class="grace-list-arrow-right grace-icons icon-arrow-right grace-margin"></text>
						</view>
					</swipeList>
				</view>
			</scroll-view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import swipeList from '@/king-components/component/swiperList.vue';
export default {
	data() {
		return {
			current: 0,
			scrollHeight: 500,
			company: [],
			btns: [
				{
					name: '取消收藏',
					bgColor: '#FF0036'
				}
			]
		};
	},
	onReady: function() {
		console.log(this.$refs.swiperList);
		setTimeout(() => {
			uni
				.createSelectorQuery()
				.select('#gBody')
				.fields(
					{
						size: true
					},
					res => {
						this.scrollHeight = res.height - uni.upx2px(180);
					}
				)
				.exec();
		}, 1000);
	},
	onLoad() {
		//获取门店
		this.getCompanyList();
	},
	methods: {
		switchTab(index) {
			this.current = index;
			if (index == 1) {
				//获取家政员
				// this.getEmployeeList()
			}
		},
		async getCompanyList() {
			let res = await this.$ajax('/kh-customer/customermanage/selectCollectStoreAndEmpList', { type: 1 });
			if (res.data.code != 200) {
				return this.KingonUI.Core.showToast(res.data.msg);
			}
			let data = res.data.data;
			if (data.length == 0) return;
			this.company = data.map(item => {
				return {
					companyId: item.employeeManageEntityList.id,
					fullName: item.employeeManageEntityList.fullName,
					image: item.employeeManageEntityList.image || '/static/empty.png',
					regionName: this.TooL.Json.parseJoin(item.employeeManageEntityList.regionName) + item.employeeManageEntityList.detailAddress
				};
			});
			console.log(res);
		},
		btnTap(btnIndex) {
			console.log(btnIndex);
			// 第二个按钮被打开 [ 删除消息 ]
			console.log(1);
			if (true) {
				uni.showModal({
					title: '确定要取消收藏门店么?',
					success: e => {
						console.log(e);
						if (e.confirm) {
						}
					}
				});
			}
		},
		//控制按钮隐藏
		swipeListTouchStart() {
			this.$refs.swiperList.forEach((item, key) => {
				//
				if (item.marginLeft != 0) {
					setTimeout(() => {
						this.$refs.swiperList[key].toZero();
					}, 800);
				}
			});
		}
	},
	components: {
		gracePage,
		swipeList
	}
};
</script>
<style>
.king-seg {
	border-bottom: 20rpx solid #f2f2f2;
}
.king-tab {
	width: 50%;
	text-align: center;
	height: 100rpx;
	line-height: 100rpx;
	font-size: 30rpx;
	z-index: 9999;
}
.king-tab-border {
	border-bottom: 2px solid #f15642;
}
.grace-list-image {
	height: 150rpx;
	width: 150rpx;
}
.king-photo {
	height: 150rpx;
	width: 150rpx;
}
</style>
